<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车列表</title>
    <link rel="stylesheet" href="/res/layui/css/layui.css" media="all">
    <script src="/res/layui/layui.js"></script>
    <script src="/res/js/jquery-3.4.1.min.js"></script>
    <script>
        var table = null;
        layui.use(['table','laydate'],function(){
            table = layui.table;
            var laydate = layui.laydate;
            var $ = layui.$;
            //从session中取出用户信息
            let user=sessionStorage.getItem("user");
            console.info("获得的user是",user);
            let userId = "";
            if(user==null || user==""){
                location.href="login";
            }else {
                //JSON.parse(字符串)   将字符串转化为json
                console.info("user",JSON.parse(user));
                userId = JSON.parse(user).userId;
                console.info("userId",userId);

            }
            $("#exit").on("click",function (){
                sessionStorage.removeItem("user");
            })
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 600
                ,url: '/cart/list?userId='+userId //数据接口
                ,title: '商品表'
                ,page: true //开启分页
                ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                ,id:'testTable'
                ,totalRow: true //开启合计行
                ,cols: [[ //表头
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'zizeng', width:80, title: '序号',fixed: 'left',type:'numbers'}
                    ,{field: 'pdName', title: '商品名称', width:120, sort: true}
                    ,{field: 'cartNumber', title: '数量', width:120, sort: true}
                    ,{field: 'cartMoney', title: '总计', width: 120, sort: true}
                    ,{field: 'cartDate', title: '加入时间', width: 120, sort: true}
                    ,{fixed: 'right', width: 180, align:'center', toolbar: '#barDemo'}
                ]]
            });

            //日期范围
            laydate.render({
                elem: '#test6'
                //设置开始日期、日期日期的 input 选择器
                //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                ,range: ['#test-startDate-1', '#test-endDate-1']
            });

            //查询按钮绑定事件
            $("#queryBtn").on("click",function (){
                //执行重载
                table.reload('testTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {//刷新表格时，向后台传输的参数
                        pdName:$("#pdName").val(),//商品名称
                        cartDateMin:$("#test-startDate-1").val(),//最低价格
                        cartDateMax:$("#test-endDate-1").val()//最高价格
                    }
                });
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值

                if(layEvent === 'update'){
                    layer.open({
                        type: 2,
                        title: '修改',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['580px', '90%'],
                        content: 'cartform?id='+data.cartId //iframe的url
                    });
                } else if(layEvent === 'delete'){
                    layer.confirm('是否删除该条购物单？', function(index){
                        layer.close(index);
                        //向服务端发送删除指令
                        let url = "/cart/deleteById";
                        let data_ = {id:data.cartId};//ID哪里拿？ data里面取
                        $.post(url,data_,function (resp){
                            if(resp.state==1){
                                layer.msg("删除成功");
                                //删除完成后重新加载表格
                                table.reload('testTable');
                            }else {
                                layer.msg("删除失败");
                            }
                        },"json");
                    });
                }
            });

            //监听头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                    case 'add':
                        layer.msg('添加');
                        //iframe层

                        var indexOpen = layer.open({
                            type: 2,
                            title: '购物车维护页面',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['580px', '90%'],
                            content: '/cart/add' //iframe的url
                        });
                        break;
                    case 'update':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else if(data.length > 1){
                            layer.msg('只能同时编辑一个');
                        } else {
                            //layer.alert('编辑 [id]：'+ JSON.stringify(checkStatus.data[0]));
                            var indexOpen = layer.open({
                                type: 2,
                                title: '购物车维护页面',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['580px', '90%'],
                                content: '/cart/update?id='+checkStatus.data[0].cartId //iframe的url
                            });
                        }
                        break;
                    case 'delete':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else {
                            //layer.msg('删除');
                            layer.confirm('真的删除所选行么', function(index){
                                layer.close(index);//关闭当前弹窗
                                //向服务端发送删除指令
                                let ids = "";
                                for (let i = 0; i < data.length; i++) {
                                    ids += data[i].cartId+",";
                                }
                                ids = ids.substring(0,ids.length-1);
                                console.info("要删除的ID是："+ids);
                                let url = "/cart/deleteAll";
                                let data_ = {ids:ids};//ID哪里拿？ data里面取
                                $.post(url,data_,function (resp){
                                    if(resp.state==1){
                                        layer.msg(resp.msg);
                                        //删除完成后重新加载表格
                                        table.reload('testTable');
                                    }else {
                                        layer.msg("删除失败");
                                    }
                                },"json");
                            });
                        }
                        break;
                };
            });
        });

        /**
         * 关闭层的方法
         * @param msg
         */
        function closeLayer(msg){
            layer.closeAll();//关闭所有弹出的层
            table.reload('testTable');
            layer.msg(msg);
        }

        /**
         * 显示图片的预览
         * @param url
         */
        function showImage(url){
            //页面层
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['840px', '740px'], //宽高
                content: '<img src="'+url+'" alt="预览图片" width="740" height="640">'
            });
        }
    </script>
</head>
<body>
<script>
    $(function (){
        //从session中取出用户信息
        let user=sessionStorage.getItem("user");
        console.info("获得的user是",user);
        if(user==null || user==""){
            location.href="login";
        }else {
            //JSON.parse(字符串)   将字符串转化为json
            console.info("user",JSON.parse(user));
            let userId = JSON.parse(user).userId;
            console.info("userId",userId);

        }
        $("#exit").on("click",function (){
            sessionStorage.removeItem("user");
        })
    })
</script>
<div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
        <input type="text" id="pdName" name="title" lay-verify="title" autocomplete="off" placeholder="请输入名称" class="layui-input">
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">日期范围</label>
        <div class="layui-inline" id="test6">
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期" name="cartDateMin">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期" name="cartDateMax">
            </div>
        </div>

        <div class="layui-inline">
            <button type="button" class="layui-btn" id="queryBtn">查询</button>
        </div>
    </div>
</div>

<table id="demo" lay-filter="test" class="layui-hide"></table>
<script type="text/html" id="zizeng">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-normal layui-btn-sm" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-primary layui-btn-danger layui-btn-sm" lay-event="delete" >删除</a>
</script>

</script>
<!--图片的自定义模板-->
<script type="text/html" id="pdPhotoTpl">
    <img src="{{d.pdPhoto}}" alt="商品图片" onclick="showImage('{{d.pdPhoto}}')">
</script>
</body>
</html>
